<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://www.ip-look-up.com/Services/ipInfo.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script> 


<SCRIPT language=JScript event=OnObjectReady(objObject,objAsyncContext) for=foo> 
   if(objObject.IPEnabled != null && objObject.IPEnabled != "undefined" && objObject.IPEnabled == true) 
   { 
    if(objObject.MACAddress != null && objObject.MACAddress != "undefined") 
    MACAddr = objObject.MACAddress; 
    if(objObject.IPEnabled && objObject.IPAddress(0) != null && objObject.IPAddress(0) != "undefined") 
    IPAddr = objObject.IPAddress(0); 
    if(objObject.DNSHostName != null && objObject.DNSHostName != "undefined") 
    sDNSName = objObject.DNSHostName; 
    } 
</SCRIPT> 

<script type="text/javascript"> 
var geocoder; // define a Geocoder instanse 
var map;        //define a Map instance 
var infowindow = new google.maps.InfoWindow();    // define a information window,

var boxpolys = null;        //collection the tracker array
//var directions = null; 
// navigator control
var routeBoxer = null;     // routerboxer instanse
var distance = null; // km 


	// init a simple map
function initialize() { 

	  // create Gecoder instanse, implement address geocod 
    geocoder = new google.maps.Geocoder(); 
    
	// init the LatLng, LatLNng is latitude and logtitude, it is the center of map
    
	// lat, - 90 -- 90  ,long - 180 to 180

	// ipLocation.latitude, ipLocation.longitude , is used ip get the location
    var latlng = new google.maps.LatLng(ipLocation.latitude, ipLocation.longitude); 
    
	//Define a mpa options instanse
    var myOptions = { 
      zoom: 14,             // map zoom level
      center: latlng,    // center latlng
	  // type of map , ROADMAP ,SATELLITE,HYBRID,TERRAIN
      mapTypeId: google.maps.MapTypeId.ROADMAP,    
      disableDoubleClickZoom:true 
      // another properties
    } 
    
	// create a map, first parameter is div used for show map, and second one is myoptions
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    codeEvent();    //call event handler
   
    //navigator control init
    routeBoxer = new RouteBoxer(); 
    directionService = new google.maps.DirectionsService(); 
    directionsRenderer = new google.maps.DirectionsRenderer({ map: map }); 
   
} 


// according to address, find the addres, and show the tag of the center of map
function codeAddress() { 
    var address = document.getElementById("address").value; 
    if (geocoder) { 
      geocoder.geocode( { 'address': address}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
            //results[0].geometry.location  this is the address location
          map.setCenter(results[0].geometry.location); 
          /* 
                  
				  new on marker, set the markeroptions, and position
          */ 
          var marker = new google.maps.Marker({ 
              map: map,                                 //map 
              position: results[0].geometry.location    //marker location
          }); 
           infowindow.setContent(address);     //window infromation
           infowindow.open(map, marker);    //open the window infrmation
        } else { 
          alert("Geocode was not successful for the following reason: " + status); 
        } 
      }); 
    } 
} 



// according to the latlng search, show in the center of map
function codeLatLng() { 
    //var input = document.getElementById("latlng").value; 
    /*hander the location string */ 
    var input = "28.19,112.98"; 
    var latlngStr = input.split(",",2); 
    var lat = parseFloat(latlngStr[0]); 
    var lng = parseFloat(latlngStr[1]); 
    var latlng = new google.maps.LatLng(lat, lng);    //new a latlng instanse
    if (geocoder) { 
      geocoder.geocode({'latLng': latlng}, function(results, status) {    //
        if (status == google.maps.GeocoderStatus.OK) {    //saearch status 
          if (results[1]) {                                //successful 
            map.setZoom(11);    //set zoom
            marker = new google.maps.Marker({    //add marker to the map
                position: latlng, 
                map: map 
            }); 
            
            infowindow.setContent(results[1].formatted_address);     
            infowindow.open(map, marker);    
          } 
        } else { 
          alert("Geocoder failed due to: " + status); 
        } 
      }); 
    } 
} 




//hander event
function codeEvent() { 
    //double click
    google.maps.event.addListener(map,'dblclick',function(event){ 
    map.setCenter(event.latLng); 
        var marker = new google.maps.Marker({//when double click ,show name
              map: map,                                
              position: event.latLng,     //attentation, get the latlng of double click
              zIndex:1, 
              draggable:true, 
              title:'my tag' 
        }); 
        infowindow.setContent('my home'); 
        infowindow.open(map, marker); 
    }); 
    //mouse move
    google.maps.event.addListener(map,'mouseover',function(){ 
        //alert("run mouseover"); 
    }); 
} 

//navigator handler
function route() { 
      // Clear any previous route boxes from the map 
      clearBoxes(); 
     
      // Convert the distance to box around the route from miles to km 
      distance = parseFloat(400) * 1.609344; 
     
      /** 
	  DirectionsRequest instatnse have 10 parameters of options
	  Navigator DirectionService.route conttains three need parameters : begin location, end location, navigator type
	  
      */ 
      var request = { 
        origin: document.getElementById("from").value,             // origin address name or latlng instanse
        destination: document.getElementById("to").value,          // destination, address or latlng instanse
        provideRouteAlternatives: true,                            //Whether to provide alternative routes optional parameters
        travelMode: google.maps.DirectionsTravelMode.DRIVING    // type of navigator:  BICYCLING,DRIVING,WALKING
      } 
     
   
	  /*
			navigator method>
			request,
			a callback function,
			
	  */
      directionService.route(request, function(result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
          directionsRenderer.setDirections(result);   
          alert("total method: " + result.routes.length ); 
         
          var path = result.routes[0].overview_path; 
          var boxes = routeBoxer.box(path, distance); 
          drawBoxes(boxes); 
        } else { 
          alert("Directions query failed: " + status); 
        } 
      }); 
    } 
   
   
   
    
    function drawBoxes(boxes) { 
      boxpolys = new Array(boxes.length); 
      for (var i = 0; i < boxes.length; i++) { 
    // alert(boxes[i]); 
    // 
        boxpolys[i] = new google.maps.Rectangle({   
        /* 
            
               
        */ 
          bounds: boxes[i],      
          fillOpacity: 0,        
          strokeOpacity: 0.5,   
          strokeColor: '#000000',   
          strokeWeight: 1,      
          map: map 
        }); 
      } 
    } 
   
  
    function clearBoxes() { 
      if (boxpolys != null) { 
        for (var i = 0; i < boxpolys.length; i++) { 
          boxpolys[i].setMap(null); 
        } 
      } 
      boxpolys = null; 
    } 

</script> 
</head> 

<body onload="initialize()"> 
<div id="map_canvas" style="width: 500; height: 500;"></div> 
<div> 
    <input id="address" type="textbox" value="zhuhai"> 
    <input type="button" value="search" onclick="codeAddress()"> 
    <input type="button" value="show center" onclick="codeLatLng()"> 
</div> 
<br> 
from<input id="from" type="text" value="beijing"> 
to<input id="to" type="text" value="guangzhou"> 
<input type="button" value="navigator" onclick="route()"> 



</body> 
</html> 